<template>
  <div style="height: 100%;background-color: #01001C;">
    <div class="content">
      <el-row>
        <el-col :span="24"><img class="video" src="../../assets/imgs/dy.png"><p style="color:#FFFFFF;font-size:12px;float: left;margin: 13px 43px;">电源</p>
          <div style="float: right;margin: 0 30px;">
            <p
              v-if="deviceStatus"
              style="margin-top: 9px;font-size: 12px;font-weight: 400;color: rgb(28, 247, 17);"
            >正常</p>
            <p
              v-else
              style="margin-top: 9px;font-size: 12px;font-weight: 400;color: red"
            >异常</p>
          </div>
        </el-col>
        <div style="height: 1px;margin-top: 30px;width: 90%;background-image: linear-gradient(90deg, #1D3CA0, #020B1F);" />
        <div>
          <p style="color:#FFFFFF;font-size:12px;float: left;margin: 13px 13px;">网络电源时序开关</p>
          <div style="float: right;margin: 0 30px;">
            <el-breadcrumb separator="|">
              <!-- <el-breadcrumb-item v-if="allOpen==1"><el-button type="text" style="color:#18E115">开</el-button></el-breadcrumb-item> -->
              <el-breadcrumb-item><el-button type="text" style="color:#FFFFFF" @click="openAllChannel">开</el-button></el-breadcrumb-item>
              <el-breadcrumb-item><el-button type="text" style="color:#FFFFFF" @click="closeAllChannel">关</el-button></el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
      </el-row>
      <el-row v-if="tribunalList.length > 0">
        <div v-if="tribunalList[0].equipmentId.split(',')[1] === '112'">
          <div v-for="(item, index) in tableData1" :key="index+'camera4'" :class="[item.switchStatus==1 ? 'camera5':'camera4']" @click="sendCommand(item)">
            <p style="position: absolute;margin-left: 10px;">{{ index }}</p><br>
            <p v-if="item.switchStatus==1" style="color:#18E115;"> 开启</p>
            <p v-if="item.switchStatus==0" style="color:#787879;">未开启</p>
            <p v-if="item.switchStatus==1" style="color:#FFFFFF;margin-left: 13px;">{{ item.name }}</p>
            <p v-if="item.switchStatus==0" style="color:#787879;margin-left: 13px;">{{ item.name }}</p>
          </div>
        </div>
        <div v-if="tribunalList[0].equipmentId.split(',')[1] === '111'">
          <div v-for="(item, index) in tableData2" :key="index+'camera4'" :class="[item.switchStatus==1 ? 'camera5':'camera4']" @click="sendCommandOther(item,tribunalList[0],index)">
            <p style="position: absolute;margin-left: 10px;">{{ index }}</p><br>
            <p v-if="item.switchStatus==1" style="color:#18E115;"> 开启</p>
            <p v-if="item.switchStatus==0" style="color:#787879;">未开启</p>
            <p v-if="item.switchStatus==1" style="color:#FFFFFF;margin-left: 13px;">{{ item.name }}</p>
            <p v-if="item.switchStatus==0" style="color:#787879;margin-left: 13px;">{{ item.name }}</p>
          </div>
        </div>
      </el-row>
      <el-row v-if="tribunalList.length===0">
        <p style="color: #999999;text-align: center;font-size: 12px;margin-top: 16%;">暂无电源开关数据</p>
      </el-row>
    </div>
    <!-- 对话框，输入密码后关闭所有电源   -->
    <el-dialog
      title="提示"
      :visible.sync="confirmCloseVisible"
      width="30%"
      :before-close="beforeHandleClose"
    >
      <el-row>
        <span>请输入密码</span>
      </el-row>
      <el-row style="margin-top: 5px">
        <el-input v-model="powerOptPasswd" type="text" />
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelConfirmClose">取 消</el-button>
        <el-button type="primary" @click="doConfirmClose">确 定</el-button>
      </span>
    </el-dialog>
    <!--    <el-input v-mode="powerOptPasswd" type="text"></el-input>-->
  </div>
</template>

<script>
import { getAllTribunalEquipmentList, getAllPowerEquipmentStatus } from '@/api/tribunalEquipment'
import { findAllPowerConfig, sendPowerMessage, sendGroupPowerMessage, getPowerDeviceStatus } from '@/api/powerConfig'
// import {deepCopy, createDeepCopy} from '@gby/deep-copy'
import axios from 'axios'
import { getPowerPassword } from '@/api/user'
export default {
  name: '',
  components: {
  },
  props: {
    tribunal2: {
      type: Number, // 类型
      default: () => {
      } // 默认值
    }
  },
  data() {
    return {
      testloop: 20,
      operateChannel: 1,
      deviceVersion: 2,
      tribunalCode: '',
      deviceId: 0,
      totalOperateType: 1,
      deviceStatus: false,
      operateType: 'single',
      operateItem: null,
      powerOptPasswd: '',
      confirmCloseVisible: false,
      columData: [],
      allOpen: 0,
      tableData1: [],
      tableData: [
        {
          index: 0,
          sort: 1,
          name: '第一路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        },
        {
          index: 1,
          sort: 2,
          name: '第二路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        },
        {
          index: 2,
          sort: 3,
          name: '第三路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        },
        {
          index: 3,
          sort: 4,
          name: '第四路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        },
        {
          index: 4,
          sort: 5,
          name: '第五路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        }, {
          index: 5,
          sort: 6,
          name: '第六路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        }, {
          index: 6,
          sort: 7,
          name: '第七路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        }, {
          index: 7,
          sort: 8,
          name: '第八路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        }, {
          index: 8,
          sort: 9,
          name: '第九路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        }
      ],
      tableData2: [
        {
          index: 0,
          sort: 1,
          name: '第一路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        },
        {
          index: 1,
          sort: 2,
          name: '第二路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        },
        {
          index: 2,
          sort: 3,
          name: '第三路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        },
        {
          index: 3,
          sort: 4,
          name: '第四路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        },
        {
          index: 4,
          sort: 5,
          name: '第五路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        }, {
          index: 5,
          sort: 6,
          name: '第六路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        }, {
          index: 6,
          sort: 7,
          name: '第七路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        }, {
          index: 7,
          sort: 8,
          name: '第八路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        },
        {
          index: 8,
          sort: 9,
          name: '第9路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        },
        {
          index: 9,
          sort: 10,
          name: '第10路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        },
        {
          index: 10,
          sort: 11,
          name: '第11路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        },
        {
          index: 11,
          sort: 12,
          name: '第12路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        },
        {
          index: 12,
          sort: 13,
          name: '第13路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        }, {
          index: 13,
          sort: 14,
          name: '第14路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        }, {
          index: 14,
          sort: 15,
          name: '第15路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        }, {
          index: 15,
          sort: 16,
          name: '第16路电源',
          equipmentId: 2,
          switchStatus: 1,
          id: null
        }
      ],
      tribunalList: [],
      tribunals: {
        tribunalCode: null,
        typeId: '6'
      },
      powerStatus: []
    }
  },
  watch: {
    tribunal2(newvalue) {
      this.tribunals.tribunalCode = newvalue
      if (this.tribunals.tribunalCode != null) {
        this.getAllTribunalEquipmentList()
      }
    }
  },
  created() {
  },
  methods: {
    beforeHandleClose() {
      console.log('beforeHandleClose')
    },
    cancelConfirmClose() {
      this.powerOptPasswd = ''
      this.confirmCloseVisible = false
    },
    doConfirmClose() {
      getPowerPassword().then(res => {
        const password = res.data.password
        if (this.powerOptPasswd !== password) {
          this.$message('密码错误')
          return
        } else {
          localStorage.setItem('hasPass', '1')
          setTimeout(function() {
            localStorage.setItem('hasPass', '')
          }, 10 * 60 * 1000)
          if (this.operateType === 'single') {
            this.doSendCommand(this.operateItem)
          } else if (this.operateType === 'openAll') {
            this.open1()
          } else {
            this.close1()
          }
        }
        this.confirmCloseVisible = false
        this.powerOptPasswd = ''
      })
    },
    doSendCommand(item) {
      this.sendCommandOther1(item.val, item, item.index)
    },
    verifyOperatePermission() {
      const hasPass = localStorage.getItem('hasPass')
      if (hasPass === '1') {
        setTimeout(function() {
          localStorage.setItem('hasPass', '')
        }, 10 * 60 * 1000)
        if (this.operateType === 'single') {
          this.doSendCommand(this.operateItem)
        } else {
          if (this.operateType === 'openAll') {
            this.open1()
          } else {
            this.close1()
          }
        }
      } else {
        this.confirmCloseVisible = true
      }
    },
    openAllChannel() {
      this.operateType = 'openAll'
      this.verifyOperatePermission()
    },
    closeAllChannel() {
      this.operateType = 'closeAll'
      this.verifyOperatePermission()
    },
    open1() {
      if (this.tribunalList.length > 0) {
        const item = JSON.parse(JSON.stringify(this.tribunalList[0]))
        item.switchValue = 1
        this.openClosePowerEquipment(item)
      }
    },
    close1() {
      if (this.tribunalList.length > 0) {
        const item = JSON.parse(JSON.stringify(this.tribunalList[0]))
        item.switchValue = 2
        this.openClosePowerEquipment(item)
      }
    },
    openClosePowerEquipment(item) {
      item.originalEquipmentId = item.equipmentId
      const equipmentId = item.equipmentId
      const equipment1 = equipmentId.split(',')[1]
      item.equipmentId = equipment1
      sendGroupPowerMessage(item).then(res => {
        console.log('group operation finish')
        if (this.tribunalList.length > 0) {
          const _this = this
          setTimeout(function() {
            _this.getAllPowerEquipmentStatus()
          }, 2000)
        }
      })
    },
    getAllPowerEquipmentStatus() {
      const equipment = this.tribunals
      equipment.equipmentId = '6,111'
      getAllPowerEquipmentStatus(equipment).then(response => {
      // getAllPowerEquipmentStatus(this.tribunals).then(response => {
        // this.powerStatus = response.data
        const statusResp = response.data
        var variableb = []
        variableb = statusResp.variable.value
        let variableStr = ''
        console.log(variableb)
        for (var i = 0; i < variableb.length; i++) {
          const temp = String.fromCharCode(variableb[i])
          variableStr += temp
        }
        console.log(variableStr)
        const variableStrs = variableStr.split(' ')
        const variableArray = []
        for (let j = 0; j < variableStrs.length; j++) {
          if (variableStrs[j] !== '') {
            variableArray.push(variableStrs[j])
          }
        }
        console.log(variableArray)
        this.powerStatus = variableArray
        if (this.powerStatus.length > 0) {
          for (const i in this.powerStatus) { // i为索引值
            for (const b in this.tableData2) { // b为索引值
              if (i === b) {
                if (this.powerStatus[i] === 'Off') {
                  this.tableData2[b].switchStatus = 0
                } else {
                  this.tableData2[b].switchStatus = 1
                }
              }
            }
          }
        }
      })
    },
    getAllTribunalEquipmentList() {
      getAllTribunalEquipmentList(this.tribunals).then(response => {
        this.tribunalList = response.data
        console.log('getting power equipment')
        console.log(this.tribunalList)
        if (this.tribunalList.length > 0) {
          const device = this.tribunalList[0]
          this.operateItem = device
          this.getDeviceStatus1()
          this.deviceVersion = device.deviceVersion
          this.tribunalCode = device.tribunalCode
          this.findAllPowerConfig(this.tribunalList[0])
        }
      })
    },
    findAllPowerConfig(row) {
      findAllPowerConfig(row).then(response => {
        // 法正电源
        var str = row.equipmentId
        str = str.split(',')
        var num1 = str[1]
        if (num1 === '112') {
          if (response.data.length > 0) {
            this.tableData = response.data
            axios.get('http://' + this.tribunalList[0].ip + '/ChStatus?ts=1663060362740').then(res => {
              var value = res.data
              this.tableData.forEach((item, index) => {
                if (index === 0) {
                  item.switchStatus = value.Ch1
                } else if (index === 1) {
                  item.switchStatus = value.Ch2
                } else if (index === 2) {
                  item.switchStatus = value.Ch3
                } else if (index === 3) {
                  item.switchStatus = value.Ch4
                } else if (index === 4) {
                  item.switchStatus = value.Ch5
                } else if (index === 5) {
                  item.switchStatus = value.Ch6
                } else if (index === 6) {
                  item.switchStatus = value.Ch7
                } else if (index === 7) {
                  item.switchStatus = value.Ch8
                } else if (index === 8) {
                  this.allOpen = value.Ch9
                  alert(this.allOpen)
                // item.switchStatus = value.Ch9
                }
              })
              this.allOpen = value.Ch9
            })
          } else {
            axios.get('http://' + this.tribunalList[0].ip + '/ChStatus?ts=1663060362740').then(res => {
              var value = res.data
              this.tableData.forEach((item, index) => {
                item.equipmentId = row.id
                if (index === 0) {
                  item.switchStatus = value.Ch1
                } else if (index === 1) {
                  item.switchStatus = value.Ch2
                } else if (index === 2) {
                  item.switchStatus = value.Ch3
                } else if (index === 3) {
                  item.switchStatus = value.Ch4
                } else if (index === 4) {
                  item.switchStatus = value.Ch5
                } else if (index === 5) {
                  item.switchStatus = value.Ch6
                } else if (index === 6) {
                  item.switchStatus = value.Ch7
                } else if (index === 7) {
                  item.switchStatus = value.Ch8
                } else if (index === 8) {
                  this.allOpen = value.Ch9
                // item.switchStatus = value.Ch9
                }
              })
            })
          }
        } else {
          // 其他电源
          console.log("it's chu xi power")
          if (response.data.length > 0) {
            this.tableData2 = response.data
            console.log(this.tableData2)
          }
          this.getAllPowerEquipmentStatus()
        }
      })
    },
    getDeviceStatus1() {
      const data = {
        originalEquipmentId: this.operateItem.equipmentId,
        courtCode: this.operateItem.courtCode
      }
      getPowerDeviceStatus(data).then(res => {
        if (res.success) {
          this.deviceStatus = res.data
        }
      })
    },
    sendCommand(val) {
      var num = val.index - 0 + 1
      axios.get('http://' + this.tribunalList[0].ip + '/SetCh?ChNo=' + num).then(res => {
        this.formatSwitch()
      })
    },
    sendCommandOther(val, original, index) {
      this.operateType = 'single'
      this.operateItem.index = index
      this.operateItem.val = val
      this.verifyOperatePermission()
    },
    sendCommandOther1(val, original, index) {
      console.log(val)
      val.command = 'dummy'
      if (val.command === undefined || val.command === '') {
        this.$message({
          message: '电源未配置命令，无法发送指令',
          type: 'warning'
        })
      } else {
        if (val.switchStatus === 1) {
          val.switchValue = 2
        } else {
          val.switchValue = 1
        }
        // 将第几路传给后端
        val.sort = index + 1
        val.originalEquipmentId = original.equipmentId
        val.courtCode = original.courtCode
        sendPowerMessage(val).then(response => {
          // this.tribunalList = response.data
          if (this.tribunalList.length > 0) {
            const _this = this
            setTimeout(function() {
              _this.getAllPowerEquipmentStatus()
            }, 2000)
          }
        })
      }
    },
    open() {
      const _this = this
      axios.get('http://' + this.tribunalList[0].ip + '/SetCh?ChNo=' + 9).then(res => {
        for (var i = 0; i < 20; i++) {
          (function(t, data) { // 注意这里是形参
            setTimeout(function() {
              _this.formatSwitch()
            }, 1000 * t)	// 还是每秒执行一次，不是累加的
          })(i, '其他参数') // 注意这里是实参，这里把要用的参数传进去
        }
      })
    },
    formatSwitch() {
      var str = this.tribunalList[0].equipmentId
      str = str.split(',')
      var num1 = str[1]
      if (num1 === '112') {
        if (this.tribunalList.length > 0) {
          axios.get('http://' + this.tribunalList[0].ip + '/ChStatus?ts=1663060362740').then(res => {
            var value = res.data
            this.tableData.forEach((item, index) => {
              if (index === 0) {
                item.switchStatus = value.Ch1
              } else if (index === 1) {
                item.switchStatus = value.Ch2
              } else if (index === 2) {
                item.switchStatus = value.Ch3
              } else if (index === 3) {
                item.switchStatus = value.Ch4
              } else if (index === 4) {
                item.switchStatus = value.Ch5
              } else if (index === 5) {
                item.switchStatus = value.Ch6
              } else if (index === 6) {
                item.switchStatus = value.Ch7
              } else if (index === 7) {
                item.switchStatus = value.Ch8
              } else if (index === 8) {
                this.allOpen = value.Ch9
              // item.switchStatus = value.Ch9
              }
            })
            this.allOpen = value.Ch9
          })
        }
      } else {
        // 其他电源
      }
    }
  }
}
</script>
<style lang="scss" scoped>

    .content{
      width: 100%;
      height: 100%;
      box-shadow: 0px 0px 30px #2243B2 inset
    }
    .video{
      width: 16px;
      height: 16px;
      position: absolute;
      margin: 10px 20px;
    }
    .camera {
      width: 130px;
      height: 64px;
      font-size: 10px;
      color: #FFFFFF;
      float: left;
      margin-left: 15px;
      border-radius: 5px;
      background-image: linear-gradient(to top,#01001C,#1D399B);
    }
    .camera4 {
      width: 76px;
      height: 64px;
      text-align: center;
      font-size: 10px;
      color: #FFFFFF;
      float: left;
      // margin-left: 15px;
      border-radius: 5px;
      border: 1px dotted rgb(21,46,100);
      cursor: pointer;
    }
    .camera5 {
      width: 85px;
      height: 64px;
      text-align: center;
      font-size: 10px;
      color: #FFFFFF;
      float: left;
      // margin-left: 15px;
      border-radius: 5px;
      border: 1px dotted rgb(21,46,100);
      cursor: pointer;
    }
</style>
